﻿
@{
	Layout = null;
}

<!DOCTYPE html>

<html>
<head>
	<meta name="viewport" content="width=device-width" />
	<title>CreateEmployee</title>
</head>
<body>
	<div>
		@***************************************************************************************************************************
			* Web 编程模式不是事件驱动的编程模式, 而是请求响应模式. 最终用户会产生发送请求. Form 标签是 HTML 中产生请求的一种方式,
			* Form 标签内部的提交按钮 (submit) 只要一被点击, 请求会被发送到相关的 action 属性.
			* form 标签的 method (方法) 属性
			* *    Get:  当需要获取数据时使用        *   Post:  当需要新建一些事物时使用
			* *    Put:  当需要更新数据时使用        * Delete:  当需要删除数据时使用
			* 使用 Form 标签生成请求时, 所有有关输入的控件值都会随着请求一起发送 (包括提交按钮的值)
			* 当请求类型是 Get, Put 或者 Delete 时, 值会通过查询语句发送,
			* 当请求类型是 Post 时, 值会通过 Post 数据传送
			*
			* 控件的 name 是用于请求被发送时 HTML 内部使用的, id 则是用于在 JavaScript 中为实现动态功能而调用的
			* * 这里的几个文本框的 name 属性都应该对应上 Employee 类的属性名称
			* * * 如果 name 属性与 Employee 类的属性名称不一致则有三种处理方法
			* * * 1 在 Controller 的 Action 方法中使用 Request.Form["属性名"] 来获取 post 数据
			* * * 2 在 Controller 的 Action 方法中使用参数名获取数据 (如: pbulic ActionResult SaveEmployee(string FName, string LName)
			* * * 3 在 Controller 中创建自定义的 Model Binder 类 (继承 DefaultModelBinder , 重写 object CreateModel() 方法)
			* * * * 在 Action 方法的参数列表中显式地指定使用自定义 Model Binder
			*
			* 提交按钮 (input type="submit") 专门用于给服务器发送请求
			* 普通按钮 (input type="button") 用于执行自定义的客户端行为
			*
			*************************************************************************************************************************@
	</div>
	<div>
		<form action="/Employee/SaveEmployee" method="post">
			<table>
				<tr>
					<td align="left">First Name</td>
					<td><input type="text" id="TxtFName" name="FirstName" value="" /></td>
				</tr>
				<tr>
					<td colspan="2" align="left">@Html.ValidationMessage("FirstName")</td>
				</tr>
				<tr>
					<td align="left">Last Name</td>
					<td><input type="text" id="TxtLName" name="LastName" value="" /></td>
				</tr>
				<tr>
					<td colspan="2" align="left">@Html.ValidationMessage("LastName")</td>
				</tr>
				<tr>
					<td align="left">Salary</td>
					<td><input type="text" id="TxtSalary" name="Salary" value="" /></td>
				</tr>
				<tr>
					<td colspan="2" align="left">@Html.ValidationMessage("Salary")</td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<input type="submit" name="BtnSubmit" value="Save Employee" />
						<input type="button" name="BtnReset" value="Reset" />
						<input type="button" name="BtnResetAll" value="RestAll" onclick="ResetAll()" />
						<input type="submit" name="BtnSubmit" value="Cancel" />
					</td>
				</tr>
			</table>
		</form>
	</div>
	<script type="text/javascript">
		function ResetAll() {
			document.getElementById("TxtFName").innerText = "";
			document.getElementById("TxtLName").innerText = "";
			document.getElementById("TxtSalary").innerText = "";
		}
	</script>
</body>
</html>
